<template>
  <div class="virtual-keyboard" v-show="visible" @click.stop>
    <div class="keyboard-container">
      <!-- 第一行：数字和符号 -->
      <div class="keyboard-row">
        <button v-for="key in row1" :key="key" class="keyboard-key" @click="inputKey(key)">
          {{ key }}
        </button>
        <button class="keyboard-key special-key" @click="backspace">回退</button>
      </div>

      <!-- 第二行：字母 -->
      <div class="keyboard-row">
        <button v-for="key in row2" :key="key" class="keyboard-key" @click="inputKey(key)">
          {{ key }}
        </button>
      </div>

      <!-- 第三行：字母 + 确认 -->
      <div class="keyboard-row">
        <button v-for="key in row3" :key="key" class="keyboard-key" @click="inputKey(key)">
          {{ key }}
        </button>
        <button class="keyboard-key special-key" @click="confirmInput">确认</button>
      </div>

      <!-- 第四行：shift、字母 + 清空 -->
      <div class="keyboard-row">
        <button class="keyboard-key special-key shift-key" @click="toggleShift">shift</button>
        <button v-for="key in row4" :key="key" class="keyboard-key" @click="inputKey(key)">
          {{ key }}
        </button>
        <button class="keyboard-key special-key" @click="clearInput">清空</button>
      </div>

      <!-- 第五行：空格键和关闭按键 -->
      <div class="keyboard-row">
        <button class="keyboard-key space-key" @click="inputKey(' ')"></button>
        <button class="keyboard-key special-key close-key" @click="closeKeyboard">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'

// 键盘可见性
const visible = ref(false)

// 当前激活的输入框
const activeInput = ref(null)

// 是否大写状态
const isShift = ref(false)

// 键盘布局
const row1 = ref(['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '='])
const row2 = ref(['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'])
const row3 = ref(['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', "'"])
const row4 = ref(['z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/'])

// 切换大小写
const toggleShift = () => {
  isShift.value = !isShift.value
  if (isShift.value) {
    row1.value = row1.value.map(key => key.toUpperCase())
    row2.value = row2.value.map(key => key.toUpperCase())
    row3.value = row3.value.map(key => key.toUpperCase())
    row4.value = row4.value.map(key => key.toUpperCase())
  } else {
    row1.value = row1.value.map(key => key.toLowerCase())
    row2.value = row2.value.map(key => key.toLowerCase())
    row3.value = row3.value.map(key => key.toLowerCase())
    row4.value = row4.value.map(key => key.toLowerCase())
  }
}

// 输入按键
const inputKey = (key) => {
  if (activeInput.value) {
    const currentValue = activeInput.value.value || ''
    activeInput.value.value = currentValue + key
    activeInput.value.dispatchEvent(new Event('input'))
    activeInput.value.dispatchEvent(new Event('change'))
  }
}

// 退格
const backspace = () => {
  if (activeInput.value) {
    const currentValue = activeInput.value.value || ''
    activeInput.value.value = currentValue.slice(0, -1)
    activeInput.value.dispatchEvent(new Event('input'))
    activeInput.value.dispatchEvent(new Event('change'))
  }
}

// 清空输入
const clearInput = () => {
  if (activeInput.value) {
    activeInput.value.value = ''
    activeInput.value.dispatchEvent(new Event('input'))
    activeInput.value.dispatchEvent(new Event('change'))
  }
}

// 确定输入
const confirmInput = () => {
  closeKeyboard()
}

// 打开键盘
const openKeyboard = (inputElement) => {
  activeInput.value = inputElement
  visible.value = true
}

// 关闭键盘
const closeKeyboard = () => {
  visible.value = false
  activeInput.value = null
}

// 点击外部关闭键盘
const handleClickOutside = (event) => {
  if (visible.value && !event.target.closest('.virtual-keyboard')) {
    if (event.target.tagName === 'INPUT' &&
      (event.target.type === 'text' || event.target.type === 'search')) {
      return
    }
    closeKeyboard()
  }
}

defineExpose({
  openKeyboard,
  closeKeyboard,
  visible: visible
})

watch(visible, (newVal) => {
  if (newVal) {
    setTimeout(() => {
      document.addEventListener('click', handleClickOutside)
    }, 0)
  } else {
    document.removeEventListener('click', handleClickOutside)
  }
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.virtual-keyboard {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  min-width: 600px;
  max-width: 1000px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  overflow: hidden;
  transition: all 0.3s ease;
}

.keyboard-container {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.keyboard-key {
  width: 80px;
  height: 50px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f5f5f5;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  user-select: none;
}

.keyboard-key:hover {
  background-color: #e6e6e6;
}

.keyboard-key:active {
  background-color: #d9d9d9;
  transform: scale(0.96);
}

.special-key {
  background-color: #f0f0f0;
  font-size: 20px;
  border-color: #ccc;
}

.shift-key {
  width: 120px;
}

.space-key {
  flex: 1;
  /* 占据剩余空间 */
  min-width: 400px;
  /* 最小宽度 */
  max-width: 600px;
  /* 最大宽度 */
}

.close-key {
  width: 150px;
  background-color: #e63535;
  color: white;
  font-size: 20px;
}

@media (max-width: 500px) {
  .virtual-keyboard {
    width: 95%;
    max-width: 400px;
  }

  .keyboard-key {
    width: 55px;
    height: 45px;
    font-size: 18px;
  }

  .shift-key {
    width: 80px;
  }

  .space-key {
    min-width: 200px;
  }

  .close-key {
    width: 100px;
  }
}
</style>